<template>
  <div class="div_cate">
    <v-header>
      <v-back></v-back>
    </v-header>

 

    <div v-show="cates_cards.length == 0 ? false : true">
      <div class="search">
        <!-- 搜索 -->
        <search></search>
        <div class="vNAv">
          <!-- = -->
             <!-- 导航栏 -->
          <div class="div">
            <van-tabs
            class="van1"
              v-model="navActive"
              background="transparent"
              title-active-color="white"
              title-inactive-color="white"
              line-width="20"
              line-height="5"
              color="white"
            >
              <van-tab
                v-for="(item) in navs"
                :key="item.id"
                :title="item.catename"
              >
              </van-tab>
            </van-tabs>
            <div class="sl">
              <span> <van-icon name="filter-o" />筛选</span>
            </div>
          </div>

        </div>
      </div>

      <!--商品显示  -->
      <catesCards :cates_cards="cates_cards"></catesCards>
    </div>
    <!-- 无数据显示 -->
    <div>
      <div class="img" v-show="cates_cards.length == 0 ? true : false">
        <img src="./暂无数据.jpg" alt="" />
        <br />
        <van-button type="warning">随便逛逛</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import search from "../../components/search.vue";

// 
import {getgoodlist} from '@/request/api.js'
export default {
  components: { search },
  data() {
    return {
      cates_cards: [
        {
          id: "001",
          
          title: "联想小新",
          price: 4499,
          yPrice: 4699,
          conmentNum: 3565,
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
        },
        {
          id: "002",
          
          title: "联想小新",
          price: 4499,
          yPrice: 4699,
          conmentNum: 3565,
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
        },
      ],
      value: "",
      navActive: 0,
      navs: [
        { id: "1", catename: "综合排序" },
        { id: "2", catename: "销量" },
        { id: "3", catename: "价格" },
        { id: "4", catename: "好评度" },
        { id: "5", catename: "店铺" },
        { id: "6", catename: "店铺" },
        // {id:"5",catename:"店铺"},
      ],
    };
  },
  async created(){
    let msg = {cateid:`${this.$route.query.cateid}`}
    let getgoodlistRes = await getgoodlist(msg)
    // console.log(getgoodlistRes,333);
    // console.log(444,getgoodlistRes.data.list.goodData);
    this.cates_cards= getgoodlistRes.data.list.goodData ?getgoodlistRes.data.list.goodData :[] 
  }
};
</script>

<style scoped>
.search {
  margin-top: -0.02rem;
  width: 100vw;
  height: 0.9rem;
  background-image: url("../../assets/home.jpg");
  background-repeat: repeat-x;
}
.van-search {
  background-color: #0000;
  border-radius: 0.1rem;
  outline: none;
  border: none;
  width: 100vw;
  height: 0.4rem;
}
.v-nav {
  background-color: #fff0;
}
/* 无数据  */
.img {
  text-align: center;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.img > img {
  margin-left: -0.25rem;
}
.van-button {
  border-radius: 0.1rem;
}
/*  */
.div{
 
  position: relative;
}
.van1 {
  width: 80vw;
}
.sl {
  position: absolute;
  color: #fff;
  right: 0.1rem;
  top: 0.13rem;
  font-size: 0.14rem;
}
</style>